<%--
  Created by IntelliJ IDEA.
  User: 劳寄修
  Date: 2021/5/31
  Time: 19:04
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
    <title>用户列表</title>
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-3.5.1.js"></script>

    <style>

        *{

            padding: 0px;
            margin: 0px;
        }


        .layui-font-line-heigth{
            height: 30px;
            line-height: 30px;

        }

        .table{
          padding: 10px;
        }


    </style>

</head>
<body>
    <table class="layui-hide table" id="test"></table>
</body>

<script>
    layui.use('table', function(){
        var table = layui.table;
        table.render({
            elem: '#test'
            ,method:'get'
            ,url:'${pageContext.request.contextPath}/user/userdata'
            ,cols: [[
                {field:'userid', width: 80,title: 'ID', sort: true}
               ,{field:'username', title: '账号'}
                ,{field:'phone', title: '手机号'}
                ,{field:'role', width: 100 ,title: '身份',
                    templet:function(d){
                    console.log(d.role)
                        var temp=d.role
                      if (temp==null) return "普通用户";
                        return d.role.rolename;
                    }
                }
                ,{field:'phone', title: '手机号'}
                ,{field:'member', title: '开通时间',
                    templet:function(d){

                        if (d.member.createtime==null){
                            return "未开通";
                        }

                        return layui.util.toDateString(d.member.createtime, 'yyyy-MM-dd HH:mm:ss');
                    }
                }
                ,{field:'member', width:150, title: '结束时间',
                  templet:function(d){
                        var cTime=d.member.endtime;
                        var temp=cTime==null?"未开通":layui.util.toDateString(cTime, 'yyyy-MM-dd HH:mm:ss');
                        return temp;
                    }
                }
                ,{field:'phone', width: 200,title: '操作'
                    ,templet:operation()
            }

            ]]
            ,page: true
        });
    });


    function operation(){


        var op='<div class="layui-btn-container">'+
              '<button type="button"  class="layui-btn layui-btn-danger layui-font-line-heigth">删除</button>'
              +'<button type="button"  class="layui-btn layui-btn-warm layui-font-line-heigth">修改</button>'
         '</div>'
        console.log(op)
        return op;

    }





</script>
</html>
